<template>
	<view class="charts-box justify-center align-center">
		<u-navbar back-text="返回" title="实时数据" @leftClick="backFn">
			<view slot="right" @click="show = true">
				<u-icon name="calendar" size="26px"></u-icon>
			</view>
		</u-navbar>
		<view class="content">
			<view class="canvasView" v-if="canvasShow">
				<qiun-data-charts type="line" :ontouch="true" :opts="opts" :chartData="chartData" />
			</view>
			<u-empty v-else style="position: fixed;top: 0;left: 0;bottom: 0;right: 0;" mode="data"
				icon="http://cdn.uviewui.com/uview/empty/car.png">
			</u-empty>
		</view>
		<u-calendar :max-date="maxDate" allowSameDay :min-date="minDate" monthNum="12" closeOnClickOverlay @close="show=false"
			@confirm="confirmFn" :defaultDate="defaultDate" mode="range" :show="show"></u-calendar>
	</view>
</template>

<script>
	import {
		getDataAnalysis
	} from "@/api/app/dataAnalysis.js";

	export default {
		data() {
			return {
				show: false,
				chartData: {},
				opts: {},
				id: "",
				defaultDate: [],
				maxDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 1).getTime(),
				minDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 10).getTime(),
				canvasShow: true
			};
		},
		async onLoad(options) {
			this.id = options.id;
			this.res = await getDataAnalysis({
				stationId: this.id,
			});
			this.getDateFn();
			this.getDataAnalysisFn();
		},
		methods: {
			 getDateFn() {
				let res = this.res;
				let tempArr = [];
				for (let key in res) {
					tempArr.push({
						time: new Date(key).getTime(),
						data: res[key],
					});
				}
				tempArr.sort((a, b) => b.time - a.time);
				this.defaultDate = [this.$util.timestampToTime(tempArr[0].time).slice(0,10),this.$util.timestampToTime(tempArr[0].time).slice(0,10)];
				this.maxDate = tempArr[0].time;
				this.minDate = tempArr[tempArr.length - 1].time;
			},
			 getDataAnalysisFn() {
				let res = this.res;
				let tempArr = [];
				for (let key in res) {
					if (this.defaultDate.includes(key.slice(0, 10))) {
						tempArr.push({
							time: new Date(key).getTime(),
							data: res[key],
						});
					}
				}
				if (tempArr.length == 0) {
					this.canvasShow = false
					return
				} else {
					this.canvasShow = true
				}
				tempArr.sort((a, b) => b.time - a.time);
				let categories = [];
				let series = [];
				let tempObj = {};
				tempArr.forEach((v) => {
					categories.push(this.$util.timestampToTime(v.time).slice(5, -3));
					v.data.forEach((val, index) => {
						if (!tempObj[val.ekey]) {
							tempObj[val.ekey] = {
								name: "",
								list: [],
							};
						}
						if (tempObj[val.ekey]) {
							let dictData = this.$util.getDictData(
								"equipment_acquisition_info_e_num",
								val.enum
							);
							if (dictData) {
								tempObj[val.ekey].name = dictData;
							}
						}
						tempObj[val.ekey].list.push(val.evalue);
					});
				});
				for (let key in tempObj) {
					series.push({
						name: tempObj[key].name,
						data: tempObj[key].list,
					});
				}
				this.chartData = {
					categories: categories,
					series: series,
				};
				this.opts = {
					animation: true,
					dataLabel: false,
					padding: [30, 10, 50, 10],
					enableScroll: true,
					disableScroll: true,
					legend: {
						position: "bottom",
						itemGap: "40",
						lineHeight: "30",
					},
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						rotateLabel: true,
						marginTop: "10",
						rotateAngle: "60",
						itemCount: 5,
						scrollAlign: "left",
						scrollBackgroundColor: "#F7F7FF",
						scrollColor: "#DEE7F7",
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow",
							showLabel: true,
						},
						tooltip: {},
					},
				};
			},
			backFn() {
				uni.navigateBack();
			},
			confirmFn(val) {
				this.show = false;
				this.defaultDate = val;
				this.getDataAnalysisFn();
			}
		},
	};
</script>

<style lang="scss" scoped>
	.charts-box {
		width: 100%;

		.content {
			margin-top:44px ;
			width: 100%;

			.canvasView {
				width: 100%;
				height: calc(100vh - 44px);
			}
		}
	}

	/deep/ uni-button {
		background-color: rgb(60, 156, 255) !important;
	}
</style>